<script setup lang="ts">
const props = defineProps({
  tabs: {
    type: Array,
    required: true,
    default: () => []
  },
  modelValue: {
    type: [String, Number],
    default: 0
  }
})
const $emit = defineEmits(['update:modelValue', 'change'])
const currentComponent = ref(null)
const currentProps = ref({})
const activeTab = computed(() => {
  return props.modelValue;
})
function loadTabContent(index) {
  const selectedItem = this.list[index];
  if (selectedItem && selectedItem.component) {
    currentComponent.value = selectedItem.component;
    currentProps.value= selectedItem.props || {};
  }
}
function handleTabClick(index) {
  if (activeTab.value !== index) {
    $emit('update:modelValue', index);
    $emit('change', index);
    loadTabContent(index);
  }
}
onMounted(() => {
  loadTabContent(activeTab);
})

</script>

<template>
  <div class="tabs-container">
    <div class="tabs-header">
      <div
          v-for="(item, index) in tabs"
          :key="index"
          class="tab-item"
          :class="{ active: activeTab === index }"
          @click="handleTabClick(index)"
      >
        <slot :item="item">{{ item?.label }}</slot>
      </div>
    </div>
    <div class="tabs-content">
      <component :is="currentComponent" v-bind="currentProps" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.tabs-container {
  width: 100%;
}

.tabs-header {
  display: flex;
  border-bottom: 1px solid #eaeaee; /* 使用 $blog-border-color 的颜色 */
}

.tab-item {
  padding: 12px 20px;
  cursor: pointer;
  font-weight: 500;
  color: #333;
  transition: all 0.2s ease-in-out;
}

.tab-item:hover,
.tab-item.active {
  color: #007aff;
  border-bottom: 2px solid #007aff;
}

.tabs-content {
  margin-top: 20px;
}
</style>
